var MaterialOutOrder = function (hasTable) {
  var tableTemplate = /* html */ `
    <table v-if="colorList.length>0" class="out-business-order-table" cellspacing="0" cellpadding="0">
      <colgroup>
        <col>
        <col width="120px">
        <col width="120px">
        <col width="120px">
      </colgroup>
      <thead>
        <tr>
          <th>颜色</th>
          <th>数量</th>
          <th>计价数量</th>
          <th>单价</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(color,outIndex) in colorList">
        <template v-for="(detailColor,index) in color.detailColors">
          <tr :key="'colorCount_'+outIndex+'_'+index">
            <td>
              <el-checkbox v-if="color.hasCheck" v-model="color.checked" @change="materialColorChange(color,detailColor,'checked')">
                {{detailColor.showColor}}
              </el-checkbox>
              <span v-else style="margin-left:24px;">{{detailColor.showColor}}</span>
            </td>
            <td>
              <div v-if="!color.hasCheck" class="display-text">
                {{getAllCount(color,'count')}}
              </div>
              <el-input-number v-else v-model="color.count" :min="1" :max="color.total" :precision="0" size="small"
                class="table-input" :controls="false" placeholder="数量" :disabled="!color.checked"
                @change="materialColorChange(color,detailColor,'count')"></el-input-number>
            </td>
            <td>
              <div v-if="!color.hasCheck" class="display-text">
                {{getAllCount(color,'valuationCount')}}
              </div>
              <el-input-number v-else is-decimal-zero v-model="color.valuationCount" :min="1/Math.pow(10,precision)" :max="100000000-1/Math.pow(10,precision)" 
                :precision="precision" size="small" class="table-input" :controls="false" placeholder="计价数量" :disabled="!color.checked"
                @change="materialColorChange(color,detailColor,'valuationCount')">
              </el-input-number>
            </td>
            <td>
              <el-input-number is-decimal-zero v-if="color.hasCheck" v-model="color.unitPrice" :min="0" :max="99999999.99" :precision="2" size="small" class="table-input"
              :controls="false" placeholder="单价" :disabled="!color.checked" @change="materialColorChange(color,detailColor,'unitPrice')"></el-input-number>
            </td>
          </tr>
        </template>
        </template>
      </tbody>
    </table>
    <span v-else>没有颜色可以选择</span>
  `;

  var template = /* html */ `
    <div class="material-out-order">
      <template v-if="!order.hasEle">
        <el-form-item label="颜色数量" v-if="colorList!==null">
          ${tableTemplate}
        </el-form-item>
      </template>
    </div>
  `;

  var nonTableTemplate = /* html */ `
    <div class="material-out-order">
      ${tableTemplate}
    </div>
  `;

  return {
    props: {
      detailList: {
        type: Array,
        required: true
      },
      order: {
        type: Object,
        required: true
      },
      precision: Number
    },

    watch: {
      detailList: function () {
        this.setColorList();
      }
    },

    data: function () {
      return {
        colorList: null,
        isCheckEle: hasTable
      };
    },

    created: function () {
      this.setColorList();
    },

    methods: {
      setColorList: function () {
        var order = this.order;
        var maching = order.maching;
        if (maching === '') {
          this.colorList = null;
          return;
        }

        if (this.isCheckEle) {
          if ((!order.canEle && order.hasEle)) {
            this.colorList = null;
            return;
          }
        }

        if (maching === 'all' || maching.indexOf('machineMap-') === 0) {
          this.setFrameColorList();
        } else {
          this.setNormalColorList();
        }
      },

      setFrameColorList: function () {
        var detailList = this.detailList;
        var order = this.order;
        var detailGroup = _.groupBy(detailList, 'lineNo');
        var flag = SysUtil.getObjectFieldCount(detailGroup) === 1;
        var colorList = [];

        for (var lineNo in detailGroup) {
          var details = detailGroup[lineNo];
          var detail = _.minBy(details, 'orderTotal');
          var orderTotal;
          if (detail === undefined) {
            orderTotal = Infinity;
          } else {
            orderTotal = detail.orderTotal;
          }

          var detailColors = [];
          for (var i = 0; i < details.length; i++) {
            var obj = details[i];
            var colorDescription = obj.colorDescription;
            if (colorDescription === null) {
              colorDescription = '';
            }
            var showColor = `${colorDescription}(${obj.materialType})`;
            detailColors.push({
              materialCode: obj.materialCode,
              color: colorDescription,
              showColor: showColor,
              // model: obj.materialModel,
              // isReadColor: obj.isReadColor,
              materialType: obj.materialType
            });
          }

          hasCheck = flag || lineNo !== '-1';
          colorList.push({
            count: orderTotal === Infinity ? undefined : orderTotal,
            valuationCount: orderTotal === Infinity ? undefined : orderTotal,
            total: orderTotal,
            checked: false,
            hasCheck: hasCheck,
            lineNo: lineNo,
            unitPrice: hasCheck ? order.unitPrice : undefined,
            detailColors: detailColors
          });
        }
        colorList = _.orderBy(colorList, [function (color) {
          var lineNo = Number(color.lineNo);
          return lineNo;
        }]);
        this.colorList = colorList;
      },

      setNormalColorList: function () {
        var detailList = this.detailList;
        var order = this.order;
        var colorList = [];
        for (var i = 0; i < detailList.length; i++) {
          var detail = detailList[i];

          var colorDescription = detail.colorDescription;
          if (colorDescription === null) {
            colorDescription = '';
          }

          var orderTotal = detail.orderTotal;
          if (orderTotal === undefined || orderTotal === null || orderTotal === '') {
            orderTotal = Infinity;
          }

          var color = {
            count: orderTotal === Infinity ? undefined : orderTotal,
            valuationCount: orderTotal === Infinity ? undefined : orderTotal,
            total: orderTotal,
            lineNo: detail.lineNo,
            checked: false,
            hasCheck: true,
            unitPrice: order.unitPrice,
            detailColors: [{
              materialCode: detail.materialCode,
              color: colorDescription,
              showColor: colorDescription,
              // model: detail.materialModel,
              // isReadColor: detail.isReadColor,
              materialType: null
            }]
          };
          colorList.push(color);
        }
        colorList = _.orderBy(colorList, [function (color) {
          var lineNo = Number(color.lineNo);
          return lineNo;
        }]);
        this.colorList = colorList;
      },

      getAllCount: function (color, field) {
        var colorList = this.colorList;
        var totalCount = _.sumBy(colorList, function (obj) {
          if (!obj.checked) {
            return 0;
          }
          return obj[field];
        });
        color[field] = totalCount;
        return totalCount;
      },

      materialColorChange: function (color, detailColor, field) {
        this.$emit('select-group', color, detailColor, field);
      },

      getPostData: function () {
        var order = this.order;
        var colorList = this.colorList;
        var checkedColorList = _.filter(colorList, {
          checked: true
        });

        if (checkedColorList.length === 0) {
          this.$alert(i18n.getMsg('orderCirculation.createOutOrder.material-colorList'), '提示');
          return null;
        }

        var maching = order.maching;
        if (maching === 'all' || maching.indexOf('machineMap-') === 0) {
          var allColorList = _.filter(colorList, {
            hasCheck: false
          });
          var allColors = [];
          for (var i = 0; i < allColorList.length; i++) {
            var list = _.map(checkedColorList, function (obj) {
              var allColor = _.cloneDeep(allColorList[i]);
              allColor.count = obj.count;
              allColor.valuationCount = obj.valuationCount;
              allColor.typeId = obj.lineNo;
              allColor.unitPrice = obj.unitPrice;
              allColor.noCheckValid = true;
              return allColor;
            });
            allColors.pushArray(list);
          }
          checkedColorList.pushArray(allColors);
        }

        var colors = [];
        for (var i = 0; i < checkedColorList.length; i++) {
          var color = checkedColorList[i];
          if (!this.checkColorValid(color)) {
            return null;
          }

          var typeId = color.typeId;
          var detailColors = color.detailColors;
          for (var j = 0; j < detailColors.length; j++) {
            var detailColor = detailColors[j];
            var colorDescription = detailColor.color;
            var obj = {
              materialCode: detailColor.materialCode,
              color: colorDescription,
              count: color.count,
              unitPrice: color.unitPrice,
              valuationCount: color.valuationCount,
              additionalMaterialType: '',
              additionalRowIndex: '',
              // model: detailColor.model,
              // isReadColor: detailColor.isReadColor,
              rowIndex: color.lineNo
            };

            var materialType = detailColor.materialType;
            if (materialType !== null) {
              obj.maching = materialType;
            }

            if (typeId !== undefined) {
              obj.typeId = typeId;
            }
            colors.push(obj);
          }
        }
        return colors;
      },

      checkColorValid: function (color) {
        if (color.noCheckValid) {
          return true;
        }

        var feilds = ['count', 'valuationCount', 'unitPrice'];
        var code = CheckVaildUtil.checkNullField(feilds, color);
        if (code !== '') {
          var msg = i18n.getMsg(`orderCirculation.createOutOrder.material-${code}`);
          this.$alert(msg, '信息');
          return false;
        }

        if (color.unitPrice === 0) {
          var msg = i18n.getMsg(`orderCirculation.createOutOrder.material-unitPriceZero`);
          this.$alert(msg, '信息');
          return false;
        }

        return true;
      },

      toSelectGroup: function (lineNo, field, value) {
        var colorList = this.colorList;
        for (var i = 0; i < colorList.length; i++) {
          var color = colorList[i];

          if (color.lineNo === lineNo) {
            color[field] = value;
          }
        }
      }
    },

    template: hasTable ? template : nonTableTemplate
  };
};
